<template>
  <div id="big">
    <pull-to :top-load-method="refresh" :bottom-load-method="refresha">

        <ul class="ctrade_list">
          <div v-if="arr===false||arr==''">
            <li class="list_wu">
                <div class="wu">
                  <img src="../img/back.png" alt="" class="bga"><br>
                </div><br>
                <div class="wu_wz">
                  <div class="wz">
                    <span>很遗憾，没有新的客户关注您！</span>
                    <span>尝试和周边异业销售伙伴互换客源，</span>
                    <span>或购买其他销售的广告位，</span>
                    <span>让自己的服务能展示给更多的客户！</span>
                  </div>
                </div>
            </li>
          </div>
          <div v-else>
            <li  v-for="(item,index) in this.arr" :key="index" class="list">
              <img :src="item.userInfo.avatar_head" class="user_photo">
              <span class="user_name">{{item.userInfo.nickname}}</span>
              <span v-if="item.lasttime==null" class="user_time"></span>
              <span class="user_time" v-else>{{time(item.lasttime)}}</span>
              <span v-if="item.originInfo==null" class="user_change">看了你的开后门服务</span>
              <span v-else class="user_change">看了你的开后门服务({{item.originInfo.origin_describe}})</span>
              <div class="btm_line"></div>
              <a class="change_btn" v-if="item.state==1" disabled="disabled">申请中</a>
              <a v-else class="change_btn" :href="'yqlh://user_c_id='+item.userInfo.user_id+'&status=1'+'&nickname='+item.userInfo.nickname+'&headimg='+item.userInfo.avatar_head">交换电话</a>
              <div class="mid-line"></div>
              <a class="speak_btn" :href="'yqlh://user_c_id='+item.userInfo.user_id+'&status=2'+'&nickname='+item.userInfo.nickname+'&headimg='+item.userInfo.avatar_head">立即沟通</a>
            </li>
          </div>
        </ul>
    </pull-to>
  </div>
</template>
<script>
import qs from 'qs'
import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
          page:1,
          arr:{ },
          token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    getData(){
      var url=this.token+'/user/ctrade';
      var obj={
        user_id:this.$route.query.userid
      }
     var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    //转化时间
    time(nows){
       var now = new Date(nows*1000);
       var year = now.getFullYear();
       var month = now.getMonth() + 1;
       var date = now.getDate();
       return year + "-" + month + "-" + date;
    },
    refresh(loaded) {
      setTimeout(() => {
        this.getData();
      //  this.dataList.reverse();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {

        this.page++;
        var url=this.token+'/user/ctrade?page='+this.page;
        // alert(url);

        var obj={
          user_id:this.$route.query.userid
        }
        var thet=this;
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {

              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    }
  }
}
</script>
<style lang="scss" scoped>
#big{
  width:100%;
  height:100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
img{ pointer-events: none;vertical-align: sub;}
.ctrade_list:nth-last-of-type(1){
  margin-bottom:1.3rem;
}
.ctrade_list{
  width:100%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  .list{
    width:3.54rem;
    height:1.07rem;
    background: #FFFFFF;
    border-radius:0.05rem;
    position:relative;
    margin-bottom: 0.05rem;
    .user_photo{
      width:0.59rem;
      height:0.59rem;
      position: absolute;
      top:0.1rem;
      left:0.12rem;
      border-radius:0.05rem;
    }
    .user_name{
      color:#1B1B1B;
      font-size:0.15rem;
      position: absolute;
      top:0.22rem;
      left:0.81rem;
      font-weight:bold;
    }
    .user_time{
      color:#939393;
      font-size:0.1rem;
      position: absolute;
      top:0.14rem;
      left:2.75rem;
    }
    .user_change{
      color:#636363;
      font-size:0.12rem;
      position: absolute;
      top:0.5rem;
      left:0.81rem;
    }
    .btm_line{
      width:3.32rem;
      height:0.01rem;
      background:#EEEEEE;
      position: absolute;
      top:0.76rem;
      left:0.1rem;
    }
    .change_btn{
      width:50%;
      height:0.29rem;
      display:flex;
      justify-content: center;
      align-items: center;
      color:#939393;
      font-size:0.14rem;
      position: absolute;
      top:0.77rem;
      border:none;
      background: #FFFFFF;
      outline: none;
      text-decoration: none;
    }
    .mid-line{
      width:0.01rem;
      height:0.21rem;
      background:#EEEEEE;
      position: absolute;
      top:0.83rem;
      left:1.76rem;
    }
    .speak_btn{
      width:49.5%;
      height:0.29rem;
      display:flex;
      justify-content: center;
      align-items: center;
      color:#939393;
      font-size:0.14rem;
      position: absolute;
      top:0.77rem;
      left:1.77rem;
      border:none;
      background: #FFFFFF;
      outline: none;
      color:#46DCC3;
      text-decoration: none;
    }
  }
}
.list_wu{
  width:3.54rem;
  height:2.2rem;
  background: #FFFFFF;
  border-radius:0.05rem;
  position:relative;
  margin-bottom: 0.05rem;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  .wu{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:0.16rem;
    .bga{
      width:1.6rem;
      height:0.8rem;
    }
  }
  .wu_wz{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items:space-around;
    color:#939393;
    font-size:0.13rem;
    .wz{

      span{
        width:100%;
        display:flex;
        margin-bottom:0.05rem;
        //justify-content:center;
      }
    }
  }
}
</style>
